<template>
  <!-- 搜索页 -->
  <div class="searchPc">
    <div class="box">
      <searchInfo :count="count"></searchInfo>

      <div class="list">
        <toNews class="item" v-for="item in data" :key="item" :detail="item">
          <img class="img" :src="item.webimages" />
          <div class="text">
            <div class="title">{{ item.name }}</div>
            <div class="describe">
              {{ item.description }}
            </div>
          </div>
          <div class="detail">
            <div class="t">查看详情</div>
            <img class="ic" src="../../../assets/image/home/ic_right.png" />
          </div>
        </toNews>
      </div>
      <div class="pagination" v-if="data.length > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-count="total"
          @current-change="pageChange"
        />
      </div>
    </div>
  </div>

  <!-- 移动端 -->
  <div class="searchMobile">
    <div class="box">
      <searchInfo :count="count"></searchInfo>

      <div class="list">
        <toNews class="item" v-for="item in data" :key="item" :detail="item">
          <img class="img" :src="item.mobileimages" />
          <div class="text">
            <div class="title">{{ item.name }}</div>
            <div class="describe">
              {{ item.description }}
            </div>
          </div>
          <div class="detail">
            <div class="t">查看详情</div>
            <img class="ic" src="../../../assets/image/home/ic_right.png" />
          </div>
        </toNews>
      </div>
      <div class="pagination" v-if="data.length > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-count="total"
          @current-change="pageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import searchInfo from "@/components/searchInfo";
import toNews from "@/components/toNews";
export default {
  components: {
    searchInfo,
    toNews,
  },
  data() {
    return {
      page: 1,
      total: 1,
      data: [],
      search: "",
      count: "",
    };
  },
  async beforeRouteUpdate(to) {
    this.getData(to.query.search);
  },
  mounted() {
    this.getData();
  },
  methods: {
    /**
     * 获取数据
     */
    async getData(search = this.$route.query.search) {
      try {
        this.search = search;
        const result = await this.$request.get("/khcommon/listPage", {
          params: {
            keywords: search,
            page: this.page,
            pagenum: 6,
            is_page: 1,
            is_search: 1,
          },
        });
        this.data = result.data?.article;
        this.total = result.data?.totalpage;
        this.count = result.data?.articlenum;
        if (this.data?.length == 0) {
          this.$message.success("没有找到相关资讯");
        }
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },

    /**
     * 页面跳转
     */
    pageChange(e) {
      this.page = e;
      // 获取数据
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .searchMobile {
    display: none;
  }

  .searchPc {
    @include fn.fluidContainer;
    display: flex;
    flex-direction: column;
    align-items: center;

    .box {
      @include fn.container;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 50px;

      .search-box {
        margin-top: fn.wpx(48);
        display: flex;
        width: fn.wpx(592);
        height: fn.wpx(47);
        align-items: center;

        .input-box {
          width: fn.wpx(386);
          height: fn.wpx(48);
          background: #ffffff;
          border: 1px solid #dfdfdf;
          border-radius: fn.wpx(24);
          display: flex;
          height: fn.wpx(47);
          align-items: center;

          .ic {
            margin-left: fn.wpx(10);
            width: fn.wpx(47);
            height: fn.wpx(47);
          }

          .input {
            outline: none;
            padding-left: fn.wpx(10);
            color: #030303;
            border: none;
            background-color: transparent;
            display: flex;
            align-items: center;
            width: fn.wpx(250);
            height: fn.wpx(18);
            font-size: fn.wpx(18);

            font-weight: 400;
          }

          input::-webkit-input-placeholder {
            color: #c9c9c9;
          }
        }

        .btn {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: fn.wpx(23);
          width: fn.wpx(184);
          height: fn.wpx(48);
          background: #ee7800;
          border-radius: fn.wpx(24);
          color: #fff;

          &:active {
            background: rgba(210, 217, 236, 0.878);
          }
        }
      }

      .pagination {
        margin-top: 60px;
        display: flex;
      }

      .list {
        width: stretch;
        margin: 12px;
        margin-top: 40px;

        .item {
          position: relative;
          width: 100%;
          height: 318px;
          background: #ffffff;
          display: flex;
          border-top-color: #dcdcdc;
          border-top-width: 1px;
          border-top-style: dashed;

          &:hover {
            background: #f1f1f1;
          }

          .detail {
            cursor: pointer;
            position: absolute;
            bottom: 30px;
            right: 40px;
            display: flex;
            align-items: center;

            .t {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 18px;

              font-weight: 400;
              color: color.$base;
            }

            .ic {
              object-fit: fill;
              margin-left: 8px;
              width: 12px;
              height: 12px;
            }
          }

          .img {
            margin-left: 30px;
            margin-top: 30px;
            // width: 455px;
            // height: 258px;
            @include fn.scale(445px);
          }

          .text {
            margin-top: 38px;
            margin-left: 45px;
            width: 635px;

            .title {
              width: 100%;

              font-size: 24px;
              @include fn.title();
            }

            .describe {
              margin-top: 19px;
              width: 100%;
              @include fn.describe(6);
              line-height: 24px;
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .searchPc {
    display: none;
  }

  .searchMobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .box {
      width: fn.rpx(700);
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: fn.rpx(50);

      .search-box {
        margin-top: fn.rpx(48);
        display: flex;
        width: fn.rpx(592);
        height: fn.rpx(47);
        align-items: center;

        .input-box {
          width: fn.rpx(386);
          height: fn.rpx(48);
          background: #ffffff;
          border: 1px solid #dfdfdf;
          border-radius: fn.rpx(24);
          display: flex;
          height: fn.rpx(47);
          align-items: center;

          .ic {
            margin-left: fn.rpx(10);
            width: fn.rpx(47);
            height: fn.rpx(47);
          }

          .input {
            outline: none;
            padding-left: fn.rpx(10);
            color: #030303;
            border: none;
            background-color: transparent;
            display: flex;
            align-items: center;
            width: fn.rpx(250);
            height: fn.rpx(18);
            font-size: fn.rpx(18);

            font-weight: 400;
          }

          input::-webkit-input-placeholder {
            color: #c9c9c9;
          }
        }

        .btn {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: fn.rpx(23);
          width: fn.rpx(184);
          height: fn.rpx(48);
          background: #ee7800;
          border-radius: fn.rpx(24);
          color: #fff;

          &:active {
            background: rgba(210, 217, 236, 0.878);
          }
        }
      }

      .pagination {
        margin-top: fn.rpx(60);
        display: flex;
      }

      .list {
        width: stretch;
        margin: fn.rpx(12);
        margin-top: fn.rpx(40);

        .item {
          position: relative;
          width: 100%;
          height: fn.rpx(248);
          background: #ffffff;
          display: flex;
          border-top-color: #dcdcdc;
          border-top-width: fn.rpx(1);
          border-top-style: dashed;

          &:hover {
            background: #f1f1f1;
          }

          .detail {
            cursor: pointer;
            position: absolute;
            bottom: fn.rpx(30);
            right: fn.rpx(40);
            display: flex;
            align-items: center;

            .t {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: fn.rpx(16);

              font-weight: 400;
              color: color.$base;
            }

            .ic {
              object-fit: fill;
              margin-left: fn.rpx(8);
              width: fn.rpx(12);
              height: fn.rpx(12);
            }
          }

          .img {
            margin-left: fn.rpx(10);
            margin-top: fn.rpx(26);
            // width: fn.rpx( 340);
            // height: fn.rpx( 193);
            @include fn.scale(fn.rpx(340));
          }

          .text {
            margin-top: fn.rpx(38);
            margin-left: fn.rpx(30);
            width: fn.rpx(300);

            .title {
              width: 100%;
              @include fn.title();
            }

            .describe {
              margin-top: fn.rpx(19);
              width: 100%;

              @include fn.describe(4);
            }
          }
        }
      }
    }
  }
}
</style>